<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-text指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        我们学过的指令:
        * `v-bind`  : 单向绑定解析表达式,可以简写为: `:xxx`
        * `v-model` : 双向数据绑定
        * `v-for`   : 遍历数组/对象/字符串
        * `v-on`    : 绑定事件监听,可以简写为`@`
        * `v-if`    : 条件渲染(动态控制节点是否存在)
        * `v-else`  : 条件渲染(动态控制节点是否存在)
        * `v-show`  : 条件渲染(动态控制节点是否展示)
        v-text指令:
        1. 作用: 想起多再借点中渲染文本内容
        2. 与插值语法的区别: v-text会替换掉节点中的内容,{{xx}}则不会
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-text="name">你好,</div>
        <div v-text="str"></div>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str: '<h3>你好啊!</h3>'
        }
    });
</script>

</html>